import Vue from 'vue'
import Vuex from 'vuex'

// 在依赖中安装axios
import axios from 'axios'

Vue.use(Vuex);

// 定义一个容器
let store = new Vuex.Store({


    // 应用中的状态数据都存放在state中，相当于data
    state: {
        count: 100,
        // 模拟数据
        list: [],
    },

    // 我们可以使用getters对状态state进行进一步的处理，相当于计算属性
    getters: {
        filterCount(state){
            return state.count >= 120 ? 120 : state.count
        }
    },


    // mutations：唯一修改状态的事件回调函数（同步）
    mutations: {
        // 我们设置一个定时器，模拟异步操作(ajax)。在控制台vue插件里你可以看到state的状态不是符合预期的，这个时候我们需要用到actions。
        addIncrement(state){
            // setTimeout(() => {
                state.count += 5;
            // },1000)
        },
        dIncrement(state, payload){
            state.count -= payload.de;
        },

        // actions异步操作获取模拟数据，提交一个mutation
        changeList(state,list){
            state.list = list;
        }
    },


    // 使用actions来处理异步操作，并且需要提交一个mutations。请结合控制台的vuex插件看state的改变。
    actions: {
        // 参数context是一个对象，它包含了和$store一样的方法
        addAction(context){
            console.log(context);
            // 设置一个定时器模拟异步操作(ajax)
            setTimeout(() => {
                // 改变状态，提交一个mutation
                context.commit('addIncrement');
                // context有一个方法dispatch，我们来触发下面的textAction
                context.dispatch('textAction', {test: '测试'});
            },1000)
        },
        textAction(context, obj){
            console.log("我被addAction触发了");
            console.log(obj)
        },

        //tips：我们使用axios请求模拟数据，在selects.vue中查看
        getList({commit}){
            // 使用axios发送请求， 
            axios.get('https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vuex/vuex#!method=get')
                .then((data) => {
                console.log(data.data);
                // 拿到模拟数据后，我们提交一个mutation，改变状态
                commit('changeList', data.data);
            })
            .catch((error) => {
                console.log(error)
            })
        }
    },

    modules: {
        // 把不同的业务逻辑拆分，使用模块化方法管理/保存/处理Vuex，使得代码逻辑清晰明确，结构代码整齐规划
        // 例子：组件访问拆分的模块的state时候，应该访问this.$store.yourModule.state...
        // 请查看文档(路由也可以拆分模块管理)。
    }

    


})

// 我理解的流程：Vue组件请求后端接口，通过actions异步操作获取数据，提交mutation(Devtools会监控mutation的变化)，从而改变state状态，最后组件中渲染出对应的数据。

export default store